<include file="public@header" />
</head>
<body>
<h1>Highcharts Examples</h1>
		<h4>Line charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-basic/index.htm">Basic line</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-ajax/index.htm">Ajax loaded data, clickable points</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-labels/index.htm">With data labels</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/annotations/index.htm">With annotations</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-time-series/index.htm">Time series, zoomable</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/spline-inverted/index.htm">Spline with inverted axes</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/spline-symbols/index.htm">Spline with symbols</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/spline-plot-bands/index.htm">Spline with plot bands</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/spline-irregular-time/index.htm">Time data with irregular intervals</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-log-axis/index.htm">Logarithmic axis</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/line-boost/index.htm">Line chart with 500k points</a></li>
		</ul>
		<div id="containerL" ></div>
		<h4>Area charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-basic/index.htm">Basic area</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-negative/index.htm">Area with negative values</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-stacked/index.htm">Stacked area</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-stacked-percent/index.htm">Percentage area</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-missing/index.htm">Area with missing points</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/area-inverted/index.htm">Inverted axes</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/areaspline/index.htm">Area-spline</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/arearange/index.htm">Area range</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/arearange-line/index.htm">Area range and line</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/sparkline/index.htm">Sparkline charts</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/streamgraph/index.htm">Streamgraph</a></li>
		</ul>
		<div id="containerAr" ></div>
		<h4>Column and bar charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bar-basic/index.htm">Basic bar</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bar-stacked/index.htm">Stacked bar</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bar-negative-stack/index.htm">Bar with negative stack</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-basic/index.htm">Basic column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-negative/index.htm">Column with negative values</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-stacked/index.htm">Stacked column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-stacked-and-grouped/index.htm">Stacked and grouped column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-stacked-percent/index.htm">Stacked percentage column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-rotated-labels/index.htm">Column with rotated labels</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-drilldown/index.htm">Column with drilldown</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-placement/index.htm">Fixed placement columns</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-parsed/index.htm">Data defined in a HTML table</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/columnrange/index.htm">Column range</a></li>
		</ul>
		<div id="containerCb" ></div>
		<h4>Pie charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-basic/index.htm">Pie chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-legend/index.htm">Pie with legend</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-donut/index.htm">Donut chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-semi-circle/index.htm">Semi circle donut</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-drilldown/index.htm">Pie with drilldown</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-gradient/index.htm">Pie with gradient fill</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pie-monochrome/index.htm">Pie with monochrome fill</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/variable-radius-pie/index.htm">Variable radius pie</a></li>
		</ul>
		<div id="containerP" ></div>
		<h4>Scatter and bubble charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/scatter/index.htm">Scatter plot</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/scatter-boost/index.htm">Scatter plot with 1 million points</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bubble/index.htm">Bubble chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bubble-3d/index.htm">3D bubbles</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/packed-bubble/index.htm">Packed bubble chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/packed-bubble-split/index.htm">Split Packed bubble chart</a></li>
		</ul>
		<div id="containerSb" ></div>
		<h4>Combinations</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/synchronized-charts/index.htm">Synchronized charts</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo/index.htm">Column, line and pie</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo-dual-axes/index.htm">Dual axes, line and column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo-multi-axes/index.htm">Multiple axes</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo-regression/index.htm">Scatter with regression line</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo-meteogram/index.htm">Meteogram</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/combo-timeline/index.htm">Advanced timeline</a></li>
		</ul>
		<div id="containerC" ></div>
		<h4>Styled mode (CSS styling)</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/styled-mode-column/index.htm">Styled mode column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/styled-mode-pie/index.htm">Styled mode pie</a></li>
		</ul>
		<div id="containerS" ></div>
        <h4>Accessible charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/accessible-line/index.htm">Accessible line chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/accessible-pie/index.htm">Accessible pie chart</a></li>
            <li><a href="__STATIC__/js/Highcharts-7.2.0/examples/advanced-accessible/index.htm">Advanced accessible chart</a></li>
            <li><a href="__STATIC__/js/Highcharts-7.2.0/examples/sonification/index.htm">Sonification</a></li>
		</ul>
		<div id="containerAc" ></div>
		<h4>Dynamic charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/dynamic-update/index.htm">Spline updating each second</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/dynamic-click-to-add/index.htm">Click to add a point</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/dynamic-master-detail/index.htm">Master-detail chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/chart-update/index.htm">Update options after render</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/responsive/index.htm">Responsive chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/live-data/index.htm">Live data from dynamic CSV</a></li>
		</ul>
		<div id="containerD" ></div>
		<h4>3D charts</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-column-interactive/index.htm">3D column</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-column-null-values/index.htm">3D column with null and 0 values</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/cylinder/index.htm">3D cylinder</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/funnel3d/index.htm">3D funnel</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pyramid3d/index.htm">3D pyramid</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-column-stacking-grouping/index.htm">3D column with stacking and grouping</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-pie/index.htm">3D pie</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-pie-donut/index.htm">3D donut</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/3d-scatter-draggable/index.htm">3D scatter chart</a></li>
		</ul>
		<div id="container3D" ></div>
		<div id="sliders">
    <table>
        <tr>
        	<td>Alpha Angle</td>
        	<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Beta Angle</td>
        	<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Depth</td>
        	<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
        </tr>
    </table>
		</div>
		<h4>Gauges</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-speedometer/index.htm">Gauge series</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-solid/index.htm">Solid gauge</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-activity/index.htm">Activity gauge</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-clock/index.htm">Clock</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-dual/index.htm">Gauge with dual axes</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/gauge-vu-meter/index.htm">VU meter</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bullet-graph/index.htm">Bullet graph</a></li>
		</ul>
		<div id="containerG" ></div>
		<h4>Heat and tree maps</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/heatmap/index.htm">Heat map</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/heatmap-canvas/index.htm">Large heat map</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/honeycomb-usa/index.htm">Tile map, honeycomb</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/treemap-coloraxis/index.htm">Tree map with color axis</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/treemap-with-levels/index.htm">Tree map with levels</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/treemap-large-dataset/index.htm">Large tree map</a></li>
		</ul>
		<div id="containerH" ></div>
		<h4>More chart types</h4>
		<ul>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/polar/index.htm">Polar (radar) chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/polar-spider/index.htm">Spiderweb</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/sunburst/index.htm">Sunburst</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/polar-wind-rose/index.htm">Wind rose</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/parallel-coordinates/index.htm">Parallel coordinates</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/windbarb-series/index.htm">Wind barb</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/vector-plot/index.htm">Vector plot</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/box-plot/index.htm">Box plot</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/error-bar/index.htm">Error bar</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/waterfall/index.htm">Waterfall</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/variwide/index.htm">Variwide</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/histogram/index.htm">Histogram</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/bellcurve/index.htm">Bell curve</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/funnel/index.htm">Funnel chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pyramid/index.htm">Pyramid chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/polygon/index.htm">Polygon series</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/pareto/index.htm">Pareto chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/sankey-diagram/index.htm">Sankey diagram</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/dependency-wheel/index.htm">Dependency wheel</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/organization-chart/index.htm">Organization chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/x-range/index.htm">X-range series</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/wordcloud/index.htm">Word cloud</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/column-pyramid/index.htm">Column pyramid chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/timeline/index.htm">Timeline</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/parliament-chart/index.htm">Parliament (item) chart</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/network-graph/index.htm">Network graph (force directed graph)</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/renderer/index.htm">General drawing</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/venn-diagram/index.htm">Venn diagram</a></li>
			<li><a href="__STATIC__/js/Highcharts-7.2.0/examples/euler-diagram/index.htm">Euler diagram</a></li>
		</ul>
		<div id="containerM" ></div>
<script src="__STATIC__/js/Highcharts-7.2.0/code/highcharts.js"></script>
<script src="__STATIC__/js/Highcharts-7.2.0/code/highcharts-3d.js"></script>
<script src="__STATIC__/js/Highcharts-7.2.0/code/highcharts-more.js"></script>
<script src="__STATIC__/js/Highcharts-7.2.0/code/modules/exporting.js"></script>
<script src="__STATIC__/js/Highcharts-7.2.0/code/modules/export-data.js"></script>
<script src="__STATIC__/js/Highcharts-7.2.0/code/modules/heatmap.js"></script>
<script type="text/javascript">
Highcharts.chart('containerP', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '风险点风险等级分布'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data:{$data}
    }]
});

Highcharts.chart('containerL', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

Highcharts.chart('containerAr', {
    chart: {
        type: 'area'
    },
    accessibility: {
        description: 'An area chart compares the nuclear stockpiles of the USA and the USSR/Russia between 1945 and 2017. The number of nuclear weapons is plotted on the Y-axis and the years on the X-axis. The chart is interactive, and the year-on-year stockpile levels can be traced for each country. The US has a stockpile of 6 nuclear weapons at the dawn of the nuclear age in 1945. This number has gradually increased to 369 by 1950 when the USSR enters the arms race with 6 weapons. At this point, the US starts to rapidly build its stockpile culminating in 32,040 warheads by 1966 compared to the USSR’s 7,089. From this peak in 1966, the US stockpile gradually decreases as the USSR’s stockpile expands. By 1978 the USSR has closed the nuclear gap at 25,393. The USSR stockpile continues to grow until it reaches a peak of 45,000 in 1986 compared to the US arsenal of 24,401. From 1986, the nuclear stockpiles of both countries start to fall. By 2000, the numbers have fallen to 10,577 and 21,000 for the US and Russia, respectively. The decreases continue until 2017 at which point the US holds 4,018 weapons compared to Russia’s 4,500.'
    },
    title: {
        text: 'US and USSR nuclear stockpiles'
    },
    subtitle: {
        text: 'Sources: <a href="https://thebulletin.org/2006/july/global-nuclear-stockpiles-1945-2006">' +
            'thebulletin.org</a> &amp; <a href="https://www.armscontrol.org/factsheets/Nuclearweaponswhohaswhat">' +
            'armscontrol.org</a>'
    },
    xAxis: {
        allowDecimals: false,
        labels: {
            formatter: function () {
                return this.value; // clean, unformatted number for year
            }
        }
    },
    yAxis: {
        title: {
            text: 'Nuclear weapon states'
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        }
    },
    tooltip: {
        pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
    },
    plotOptions: {
        area: {
            pointStart: 1940,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'USA',
        data: [
            null, null, null, null, null, 6, 11, 32, 110, 235,
            369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
            20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
            26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
            24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
            21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
            10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
            5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
        ]
    }, {
        name: 'USSR/Russia',
        data: [null, null, null, null, null, null, null, null, null, null,
            5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
            1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
            11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
            30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
            37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
            21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
            12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
        ]
    }]
});

Highcharts.chart('containerCb', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true,
        Color:'#EB1E22'
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});

Highcharts.chart('containerSb', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    accessibility: {
        description: 'A scatter plot compares the height and weight of 507 individuals by gender. Height in centimeters is plotted on the X-axis and weight in kilograms is plotted on the Y-axis. The chart is interactive, and each data point can be hovered over to expose the height and weight data for each individual. The scatter plot is fairly evenly divided by gender with females dominating the left-hand side of the chart and males dominating the right-hand side. The height data for females ranges from 147.2 to 182.9 centimeters with the greatest concentration between 160 and 165 centimeters. The weight data for females ranges from 42 to 105.2 kilograms with the greatest concentration at around 60 kilograms. The height data for males ranges from 157.2 to 198.1 centimeters with the greatest concentration between 175 and 180 centimeters. The weight data for males ranges from 53.9 to 116.4 kilograms with the greatest concentration at around 80 kilograms.'
    },
    title: {
        text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
        text: 'Source: Heinz  2003'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Height (cm)'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Weight (kg)'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x} cm, {point.y} kg'
            }
        }
    },
    series: [{
        name: 'Female',
        color: 'rgba(223, 83, 83, .5)',
        data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
            [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
            [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
            [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
            [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
            [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
            [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
            [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
            [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
            [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
            [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
            [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
            [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
            [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
            [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
            [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
            [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
            [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
            [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
            [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
            [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
            [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
            [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
            [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
            [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
            [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
            [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
            [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
            [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
            [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
            [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
            [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
            [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
            [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
            [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
            [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
            [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
            [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
            [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
            [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
            [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
            [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
            [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
            [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
            [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
            [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
            [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
            [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
            [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]

    }, {
        name: 'Male',
        color: 'rgba(119, 152, 191, .5)',
        data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
            [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
            [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
            [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
            [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
            [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
            [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
            [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
            [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
            [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
            [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
            [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
            [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
            [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
            [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
            [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
            [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
            [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
            [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
            [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
            [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
            [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
            [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
            [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
            [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
            [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
            [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
            [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
            [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
            [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
            [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
            [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
            [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
            [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
            [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
            [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
            [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
            [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
            [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
            [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
            [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
            [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
            [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
            [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
            [180.3, 83.2], [180.3, 83.2]]
    }]
});

/*
The purpose of this demo is to demonstrate how multiple charts on the same page
can be linked through DOM and Highcharts events and API methods. It takes a
standard Highcharts config with a small variation for each data set, and a
mouse/touch event handler to bind the charts together.
*/


/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
    document.getElementById('containerC').addEventListener(
        eventType,
        function (e) {
            var chart,
                point,
                i,
                event;

            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                chart = Highcharts.charts[i];
                // Find coordinates within the chart
                event = chart.pointer.normalize(e);
                // Get the hovered point
                point = chart.series[0].searchPoint(event, true);

                if (point) {
                    point.highlight(e);
                }
            }
        }
    );
});

/**
 * Override the reset function, we don't need to hide the tooltips and
 * crosshairs.
 */
Highcharts.Pointer.prototype.reset = function () {
    return undefined;
};

/**
 * Highlight a point by showing tooltip, setting hover state and draw crosshair
 */
Highcharts.Point.prototype.highlight = function (event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(
                        e.min,
                        e.max,
                        undefined,
                        false,
                        { trigger: 'syncExtremes' }
                    );
                }
            }
        });
    }
}

// Get the data. The contents of the data file can be viewed at
Highcharts.ajax({
    url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/activity.json',
    dataType: 'text',
    success: function (activity) {

        activity = JSON.parse(activity);
        activity.datasets.forEach(function (dataset, i) {

            // Add X values
            dataset.data = Highcharts.map(dataset.data, function (val, j) {
                return [activity.xData[j], val];
            });

            var chartDiv = document.createElement('div');
            chartDiv.className = 'chart';
            document.getElementById('containerC').appendChild(chartDiv);

            Highcharts.chart(chartDiv, {
                chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20
                },
                title: {
                    text: dataset.name,
                    align: 'left',
                    margin: 0,
                    x: 30
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    crosshair: true,
                    events: {
                        setExtremes: syncExtremes
                    },
                    labels: {
                        format: '{value} km'
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                tooltip: {
                    positioner: function () {
                        return {
                            // right aligned
                            x: this.chart.chartWidth - this.label.width,
                            y: 10 // align to title
                        };
                    },
                    borderWidth: 0,
                    backgroundColor: 'none',
                    pointFormat: '{point.y}',
                    headerFormat: '',
                    shadow: false,
                    style: {
                        fontSize: '18px'
                    },
                    valueDecimals: dataset.valueDecimals
                },
                series: [{
                    data: dataset.data,
                    name: dataset.name,
                    type: dataset.type,
                    color: Highcharts.getOptions().colors[i],
                    fillOpacity: 0.3,
                    tooltip: {
                        valueSuffix: ' ' + dataset.unit
                    }
                }]
            });
        });
    }
});	

Highcharts.chart('containerS', {

    chart: {
        type: 'column',
        styledMode: true
    },

    title: {
        text: 'Styling axes and columns'
    },

    yAxis: [{
        className: 'highcharts-color-0',
        title: {
            text: 'Primary axis'
        }
    }, {
        className: 'highcharts-color-1',
        opposite: true,
        title: {
            text: 'Secondary axis'
        }
    }],

    plotOptions: {
        column: {
            borderRadius: 5
        }
    },

    series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [324, 124, 547, 221],
        yAxis: 1
    }]

});
Highcharts.chart('containerAc', {
    chart: {
        type: 'spline'
    },

    accessibility: {
        description: 'Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying large growth from 2014 to 2015.'
    },

    legend: {
        symbolWidth: 40
    },

    title: {
        text: 'Desktop screen readers from 2009 to 2015'
    },

    subtitle: {
        text: 'Click on point to visit official website'
    },

    yAxis: {
        title: {
            text: 'Percentage usage'
        }
    },

    xAxis: {
        title: {
            text: 'Time'
        },
        accessibility: {
            description: 'Time from January 2009 to July 2015'
        },
        categories: ['January 2009', 'December 2010', 'May 2012', 'January 2014', 'July 2015']
    },

    tooltip: {
        split: true
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        window.location.href = this.series.options.website;
                    }
                }
            },
            cursor: 'pointer'
        }
    },

    series: [
        {
            name: 'JAWS',
            data: [74, 69.6, 63.7, 63.9, 43.7],
            website: 'https://www.freedomscientific.com/Products/Blindness/JAWS'
        }, {
            name: 'NVDA',
            data: [8, 34.8, 43.0, 51.2, 41.4],
            website: 'https://www.nvaccess.org',
            dashStyle: 'Dot'
        }, {
            name: 'VoiceOver',
            data: [6, 20.2, 30.7, 36.8, 30.9],
            website: 'http://www.apple.com/accessibility/osx/voiceover',
            dashStyle: 'ShortDot',
            color: Highcharts.getOptions().colors[7]
        }, {
            name: 'Window-Eyes',
            data: [23, 19.0, 20.7, 13.9, 29.6],
            website: 'http://www.gwmicro.com/window-eyes',
            dashStyle: 'Dash',
            color: Highcharts.getOptions().colors[0]
        }, {
            name: 'ZoomText',
            data: [0, 6.1, 6.8, 5.3, 27.5],
            website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
            dashStyle: 'ShortDashDot',
            color: Highcharts.getOptions().colors[8]
        }, {
            name: 'System Access To Go',
            data: [0, 16.2, 22.1, 26.2, 6.9],
            website: 'https://www.satogo.com',
            dashStyle: 'ShortDash',
            color: Highcharts.getOptions().colors[1]
        }, {
            name: 'ChromeVox',
            data: [0, 0, 2.8, 4.8, 2.8],
            website: 'http://www.chromevox.com',
            dashStyle: 'DotDash',
            color: Highcharts.getOptions().colors[4]
        }, {
            name: 'Other',
            data: [0, 7.4, 5.9, 9.3, 6.5],
            website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php',
            dashStyle: 'LongDash',
            color: Highcharts.getOptions().colors[7]
        }
    ],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    itemWidth: 150
                }
            }
        }]
    }
});

Highcharts.chart('containerD', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container3D',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Chart rotation demo'
    },
    subtitle: {
        text: 'Test options by dragging the sliders below'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

function showValues() {
    $('#alpha-value').html(chart.options.chart.options3d.alpha);
    $('#beta-value').html(chart.options.chart.options3d.beta);
    $('#depth-value').html(chart.options.chart.options3d.depth);
}

// Activate the sliders
$('#sliders input').on('input change', function () {
    chart.options.chart.options3d[this.id] = parseFloat(this.value);
    showValues();
    chart.redraw(false);
});

showValues();	

Highcharts.chart('containerG', {

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer'
    },

    pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#FFF'],
                    [1, '#333']
                ]
            },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, '#333'],
                    [1, '#FFF']
                ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
            backgroundColor: '#DDD',
            borderWidth: 0,
            outerRadius: '105%',
            innerRadius: '103%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});	

	
Highcharts.chart('containerH', {

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});	
Highcharts.chart('containerM', {

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    subtitle: {
        text: 'Also known as Radar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        labels: {
            format: '{value}°'
        }
    },

    yAxis: {
        min: 0
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [{
        type: 'column',
        name: 'Column',
        data: [8, 7, 6, 5, 4, 3, 2, 1],
        pointPlacement: 'between'
    }, {
        type: 'line',
        name: 'Line',
        data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
        type: 'area',
        name: 'Area',
        data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]
});							
</script>
<style type="text/css">
@import 'https://code.highcharts.com/css/highcharts.css';

#containerS {
	height: 400px;
	max-width: 800px;
	margin: 0 auto;
}

/* Link the series colors to axis colors */
.highcharts-color-0 {
	fill: #7cb5ec;
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 text {
	fill: #7cb5ec;
}
.highcharts-color-1 {
	fill: #90ed7d;
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 text {
	fill: #90ed7d;
}


.highcharts-yaxis .highcharts-axis-line {
	stroke-width: 2px;
}

</style>
</body>
</html>